<!-- 忘记密码邮件重置 -->
<template>
	<view class="uni-content pb20">
		<view class="pt20 pb20">
			<uni-steps :options="stepList" :active="stepActive" />
		</view>
		<uni-forms ref="resetPwdForm" :value="resetPwdFormVal" err-show-type="toast">
			<uni-row v-if="stepActive == 0">
				<uni-forms-item>
					<uni-easyinput :focus="focusName" @blur="focusName = false" v-model="name" placeholder="请输入用户名" />
				</uni-forms-item>
				<button class="blue-btn" type="default" @click="checkUserName">下一步</button>
			</uni-row>
			<uni-row v-if="stepActive == 1">
				<uni-forms-item>
					<uni-easyinput :focus="focusEmail" @blur="focusEmail = false" v-model="email"
						:disabled="emailDisabled" placeholder="请输入系统预留邮箱" />
				</uni-forms-item>
				<uni-forms-item>
					<uni-row :gutter="10">
						<uni-col :span="10">
							<uni-easyinput :focus="focusYzm" @blur="focusYzm = false" class="input-box" v-model="yzm"
								placeholder="请输入验证码" />
						</uni-col>
						<uni-col :span="13" :push="1">
							<button type="primary" plain class="fs14" size="default" :disabled="sendBtnDisabled"
								@click="checkEmailAndYzm()">发送验证码<text v-if="sendBtnDisabled">
									{{timeSecond}}s</text></button>
						</uni-col>
					</uni-row>
				</uni-forms-item>
				<button class="blue-btn" type="default" @click="checkEmailAndYzm(1)">下一步</button>
			</uni-row>
			<uni-row v-if="stepActive == 2">
				<uni-forms-item name="newPassword">
					<uni-easyinput class="input-box" type="password" v-model="resetPwdFormVal.newPassword"
						placeholder="请输入新密码">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="newPassword2">
					<uni-easyinput class="input-box" type="password" v-model="resetPwdFormVal.newPassword2"
						placeholder="请再次输入新密码">
					</uni-easyinput>
				</uni-forms-item>
				<button class="blue-btn" type="default" @click="submit">提 交</button>
			</uni-row>
		</uni-forms>
		<!-- 忘记密码 -->
		<!-- <view class="link-box">
			<text class="link-box-left"></text>
			<text class="link-box-right" @click="navigateToFun('/pages/ucenter/forgetPwd/byPhone')">切换手机验证</text>
		</view> -->
	</view>
</template>

<script>
	import passwordMod from '../common/js/passwordForChange.js'
	export default {
		data() {
			return {
				"name": "",
				"email": "",
				"emailDisabled": false,
				"sendBtnDisabled": false,
				"yzm": "",
				"focusName": false,
				"focusEmail": false,
				"focusYzm": false,
				"stepActive": 0,
				"stepList": [{
					"title": '用户名'
				}, {
					"title": '邮箱验证'
				}, {
					"title": '重置密码'
				}],
				"resetPwdFormVal": {
					'newPassword': '',
					'newPassword2': '',
				},
				rules: {
					...passwordMod.getPwdRules('newPassword', 'newPassword2')
				},
				timer: null,
				timeSecond: 60,
			}
		},
		onReady() {
			this.$refs.resetPwdForm.setRules(this.rules)
		},
		onLoad() {
			if (this.timer) { //注销定时器
				console.log('注销定时器')
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		onShow() {},
		methods: {
			checkUserName() {
				const nameTemp = this.name
				if (nameTemp) {
					const reg = /^\w{6,16}$/
					const reg1 = /[\u4E00-\u9FA5\uF900-\uFA2D]{1,}/
					if (!reg.test(nameTemp)) {
						this.focusName = true
						uni.showToast({
							title: '长度6~16只能包含字母、数字和下划线',
							icon: 'none'
						});
						return false
					} else if (reg1.test(nameTemp)) {
						this.focusName = true
						uni.showToast({
							title: '用户名不能包含中文',
							icon: 'none'
						});
						return false
					} else {
						//判断用户名在系统中是否存在
						let data = {
							name: nameTemp
						}
						this.$post(this.$api.wx.ucenter.dataIsExist, data).then(res => {
							if (res.isExist) {
								this.stepActive = 1
							} else {
								uni.showToast({
									title: "用户名不存在",
									icon: 'none'
								});
							}
						}).catch(e => {
							uni.showToast({
								title: e.data.msg,
								icon: 'none'
							});
						})
					}
				} else {
					this.focusName = true
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
				}
			},
			checkEmailAndYzm(type) { //校验邮箱  type=1需校验验证码
				const emailTemp = this.email
				if (emailTemp) {
					const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
					if (!reg.test(emailTemp)) {
						this.focusEmail = true
						uni.showToast({
							title: '请输入正确的Email',
							icon: 'none'
						});
						return false
					} else {
						//判断邮箱在系统中是否存在
						let data = {
							name: this.name,
							email: this.email
						}
						this.$post(this.$api.wx.ucenter.dataIsExist, data).then(res => {
							if (res.isExist) {
								let emailData = {
									email: this.email
								}
								if (type == 1) {
									if (this.yzm) {
										this.$get(this.$api.wx.ucenter.getEmailYzm, emailData).then(res => {
											if (res.code == 200) {
												if (res.msg) {
													if (this.yzm == res.msg) {
														this.stepActive = 2
													} else {
														uni.showToast({
															title: '验证码错误',
															icon: 'none'
														});
													}
												} else {
													uni.showToast({
														title: '验证码已失效,请重新获取',
														icon: 'none'
													});
												}
											}
										}).catch(e => {
											uni.showToast({
												title: e.data.msg,
												icon: 'none'
											});
										})
									} else {
										this.focusYzm = true
										uni.showToast({
											title: '请输入验证码',
											icon: 'none'
										});
									}
								} else {
									uni.showLoading({
										title: '发送中'
									});
									this.$post(this.$api.wx.ucenter.sendEmail, emailData).then(res => {
										if (res.code == 200) {
											this.emailDisabled = true
											this.sendBtnDisabled = true
											uni.showToast({
												title: '发送成功',
												icon: 'success'
											});
											this.timer = setInterval(() => {
												if (this.timeSecond > 0) {
													this.timeSecond -= 1
												} else {
													clearTimeout(this.timer);
													this.timer = null;
													this.sendBtnDisabled = false
													this.emailDisabled = false
												}
											}, 1000)
										}
									}).catch(e => {
										uni.showToast({
											title: e.data.msg,
											icon: 'none'
										});
									})
								}
							} else {
								uni.showToast({
									title: "此邮箱不是系统预留邮箱",
									icon: 'none'
								});
							}
						}).catch(e => {
							uni.showToast({
								title: e.data.msg,
								icon: 'none'
							});
						})
					}
				} else {
					this.focusEmail = true
					uni.showToast({
						title: '请输入系统预留邮箱',
						icon: 'none'
					});
				}
			},
			submit() { //提交新密码
				this.$refs.resetPwdForm.validate()
					.then(res => {
						uni.showLoading({
							title: '提交中'
						});
						let data = {
							name: this.name,
							passwordForRegister: this.resetPwdFormVal.newPassword
						}
						this.$post(this.$api.wx.ucenter.findPwdReset, data).then(res => {
							uni.showToast({
								title: "重置成功",
								icon: 'success'
							});
							setTimeout(() => {
								this.navigateToFun('/pages/ucenter/bind/index')
							}, 1500)
						}).catch(e => {
							uni.showToast({
								title: e.data.msg,
								icon: 'error'
							});
						})
					}).catch(errors => {
						console.log(errors);
					})
			},
			navigateToFun(url) {
				uni.navigateTo({
					url: url,
					fail(e) {
						console.error(e);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/style/uc-common.scss";
</style>
